<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <div>
          <title-card title="视频播放器"></title-card>
          <pre-code :code="video" language="xml" />
          
          <title-card title="视频加载成功截取第一帧"></title-card>
          <pre-code :code="getVideoCover" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="VideoCover">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const video = ref(`<video
  ref="video"
  controls
  class="video-js vjs-default-skin vjs-big-play-centered"
  :width="width"
  :height="height"
>
</video>`);
const getVideoCover = ref(`// 获取第一帧
async getVideoCover() {
  var videoElement = this.$refs["video"];
  videoElement.addEventListener("loadeddata", () => {
    console.log(1);
    var canvas = document.createElement("canvas");
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    canvas
      .getContext("2d")
      .drawImage(videoElement, 0, 0, canvas.width, canvas.height);
    // console.log(canvas.toDataURL("image/png")); //第一帧图片url
    let base64 = canvas.toDataURL("image/jpeg");
    let blob = this.dataURLtoFile(base64);
    let imgFile = this.blobToFile(blob, this.videoName);
    let videoLong = this.formateSeconds(videoElement.duration);
    this.$emit("imgFile", {imgFile,videoLong});
  });
}`)

const getTitle = () => {
  postArticleDetail({
    route: 'VideoCover',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
